import AbstractField from '@/components/hhd/design/FormDesigner/field/comps/AbstractField';
import {createDefaultDesignTable} from '@/components/hhd/design/DesignTable/TableHelper';
import $ from 'jquery';
import {createSubFormButton, openModal, VueProperties} from '@/utils/FormDesignUtils';
import TableLayoutConfig from '@/components/hhd/design/FormDesigner/field/comps/layout/TableLayoutConfig.vue';

export default class SubTable extends AbstractField {
  layoutType = 'subTable';

  getFieldComponentTitle() {
    return '明细表';
  }

  getFieldComponentName() {
    return 'subTable';
  }

  getDefaultConfig() {
    let layoutType = this.layoutType;
    return new Promise((resolve, reject) => {
      let config = VueProperties.h(TableLayoutConfig);
      openModal(config, {
        title: '请输入行和列',
        mounted() {
          config.componentInstance.row = 3;
        },
        ok(app) {
          config.componentInstance.check((config) => {
            config.layoutType = layoutType;
            resolve(config);
            app.close();
          });
        },
        cancel(app) {
          app.close();
          reject();
        },
      });
    });
  }

  createFieldElement(config) {
    return new Promise((resolve) => {
      let res = this.createSubTableElementByConfig(config);
      resolve(res);
    });
  }

  createSubTableElementByConfig(config) {
    let res = $(createDefaultDesignTable(config.row, config.col));
    res.find('tr').attr('data-sub-table-role', 'body');
    res.find('tr').first().attr('data-sub-table-role', 'header');
    res.find('tr').last().attr('data-sub-table-role', 'footer');

    let trs = res.find('tr[data-sub-table-role=body]');
    for (let i = 0; i < trs.length; i++)
      $(trs[i]).find('td').first().attr('data-placeholder', '明细区').append(this.createTdContentPlaceholder('明细区'));

    res.find('tr').first().find('td').css('background', '#ebebeb');
    res.find('tr').first().find('td').first().attr('data-placeholder', '表头').append(this.createTdContentPlaceholder('表头'));
    res.find('tr').last().find('td').first().attr('data-placeholder', '表尾').append(this.createTdContentPlaceholder('表尾'));
    res.find('tr').last();
    let buttonRow = this.createButtonRow(config);
    res.find('tr').first().before(buttonRow);

    trs = res.find('tr');
    for (let i = 0; i < trs.length; i++) {
      $(trs[i]).attr('data-row', i);
    }
    this.initWidth(res[0]);
    return res[0];
  }

  initWidth(table) {
    let cols = $(table).find('col');
    for (let i = 0; i < cols.length; i++) {
      $(cols[i]).css('width', '200px');
    }
  }

  createButtonRow(config) {
    let table = $(createDefaultDesignTable(1, config.col));
    let tr = table.find('tr').first();
    $(tr).find('td').css('display', 'none');
    $(tr).find('td').removeAttr("data-role");
    let td = $(tr).find('td').first();
    td.css('display', '');
    td.attr('colspan', config.col);
    td.attr('data-sub-table-role', 'sub-form-button-container');
    td.attr('data-action-disabled', 'context,color,fontWeight,fontStyle,font,fontSize,fontSize,edit')
    $(td).css('text-align', 'left');
    $(td).css('padding', '0 5px');
    $(td).append(this.createButtonContainer())
    return tr;
  }

  createButtonContainer() {
    let div = document.createElement('div');
    $(div).append(createSubFormButton('&#xe7ff;', '新建', 'primary'))
    $(div).append(createSubFormButton('&#xe689;', '复制', 'default'))
    $(div).append(createSubFormButton('&#xe620;', '删除', 'default'))
    $(div).append(createSubFormButton('&#xe620;', '删除全部', 'default'))
    return div;
  }

  createTdContentPlaceholder(html) {
    let placeholder = document.createElement('div');
    $(placeholder).addClass('cell-placeholder');
    $(placeholder).html(html);

    return placeholder;
  }
}